<template>
  <div>
    <HomeHeader :city="city"></HomeHeader>
    <HomeSwiper :swiperList="swiperList"></HomeSwiper>
    <HomeIcon :iconList="iconList"></HomeIcon>
    <home-recommend :recommendList = "recommendList"></home-recommend>
    <home-weekend :weekendList = "weekendList"></home-weekend>
  </div>
</template>
<script>

import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcon from './components/Icon.vue'
import HomeRecommend from './components/Recommend.vue'
import HomeWeekend from './components/Weekend.vue'
import { mapState } from 'vuex'

export default {
  name: 'home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcon,
    HomeWeekend,
    HomeRecommend,
  },
  data(){
    return{
      // city:'',
      swiperList:[],
      iconList:[],
      recommendList:[],
      weekendList:[],
      lastCity:''
    }
  },
  mounted(){
    this.getHomeInfo()
    this.lastCity = this.city
  },
  activated(){
    if(this.lastCity !== this.city){
      this.lastCity = this.city
      this.getHomeInfo()
    }
  },
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHomeInfo(){
      this.$axios.get('/api/index.json?city='+this.city)
        .then((ret) => {
          // const {data} = ret
          ret = ret.data
          if(ret.ret && ret.data) {
            const data = ret.data
            // this.city = data.city
            this.swiperList = data.swiperList
            this.iconList = data.iconList
            this.recommendList = data.recommendList
            this.weekendList = data.weekendList
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less">

</style>
